<template>
  <div id="content">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/goods_manager' }"
        >商品管理</el-breadcrumb-item
      >
      <el-breadcrumb-item>商品拆料</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <div class="head">
      <el-button class="btn add-btn" @click="createProduct"
        >创建商品拆料</el-button
      >
      <el-button class="btn search-btn">查询</el-button>
      <el-button class="btn export-btn">导出报表</el-button>
    </div>
    <el-table
      class="box"
      :data="newProductDisassemblyOrders"
      border
      style="width: 100%"
    >
      <el-table-column label="行号" width="60">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="80"> </el-table-column>
      <el-table-column prop="documentNum" label="单据编号" width="100">
      </el-table-column>
      <el-table-column prop="createDate" label="创单时间" width="100">
      </el-table-column>
      <el-table-column prop="headquartersName" label="总部名称" width="100">
      </el-table-column>
      <el-table-column prop="category" label="商品类别" width="100">
      </el-table-column>
      <el-table-column prop="count" label="数量" width="80"> </el-table-column>
      <el-table-column prop="totalWeight" label="重量" width="80">
      </el-table-column>
      <el-table-column prop="totalPrice" label="成本" width="80">
      </el-table-column>
      <el-table-column prop="LabelTotalPrice" label="标签金额" width="100">
      </el-table-column>
      <el-table-column prop="createPerson" label="创单人" width="100">
      </el-table-column>
      <el-table-column prop="approver" label="审批人" width="100">
      </el-table-column>
      <el-table-column prop="approvalDate" label="审批日期" width="100">
      </el-table-column>
      <el-table-column label="操作" width="174">
        <template slot-scope="scope">
          <template></template>
          <el-button @click="handleClick(scope)" type="text" size="small"
            >审批</el-button
          >
          <el-button type="text" size="small">查看(编辑)</el-button>
          <el-button type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <PageComponents />
  </div>
</template>

<script>
import PageComponents from "@/components/PageComponents.vue";
export default {
  name: "ProductDisassembly",
  components: {
    PageComponents,
  },
  data() {
    return {
      limit: 10,
      newProductDisassemblyOrders: [],
      productDisassemblyOrders: [
        {
          goodsId: 1, // id
          status: 1, // 状态（0：已驳回；1：已通过；2：待审核）
          documentNum: 1, // 单据编号
          createDate: 1, // 创单时间
          headquartersName: 1, // 总部名称
          category: 1, // 商品类型
          count: 1, // 数量
          totalWeight: 1, // 总重量
          totalPrice: 1, // 总成本
          LabelTotalPrice: 1, // 标签总价
          createPerson: 1, // 创单人
          approver: 1, // 审批人
          approvalDate: 1, // 审批日期
        },
      ],
    };
  },
  created() {
    this.newProductDisassemblyOrders = this.productDisassemblyOrders.filter(
      (item) => {
        if (item.status == 0) {
          item.status = "已驳回";
        }
        if (item.status == 1) {
          item.status = "已通过";
        }
        if (item.status == 2) {
          item.status = "待审核";
        }
        return item;
      }
    );
  },
  methods: {
    createProduct() {
      console.log(1);
    },
    handleClick(item) {
      console.log(item);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/var.scss";
#content {
  background: #fff;
  .head {
    margin-bottom: 20px;
    .btn {
      margin-right: 20px;
      background: $theme-color;
      color: #fff;
    }
  }
  .page {
    margin-top: 20px;
    height: 30px;
    vertical-align: middle;
    .select {
      float: left;
      height: 28px;
      .el-select .el-input__inner {
        height: 28px;
        width: 40px;
      }
      .el-select .el-input .el-select__caret {
        height: 0;
        width: 0;
      }
      .el-icon-arrow-up:before {
        content: "";
      }
      .el-select .el-input__inner {
        padding: 0;
        text-align: center;
        margin: 0 4px;
      }
    }
    .pageList {
      float: right;
      margin-right: 5px;
    }
  }
}
</style>